<script setup>
import {
    Edit,
    Search,
    Refresh
} from '@element-plus/icons-vue'

import { ref } from 'vue'


//分类数据模型
const categorys = ref([])
const vendors = ref([])
const vendorId = ref('')
const categoryId = ref('')
const form = ref({
    inputName: ''
})

//商品列表数据模型
const goods = ref([])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    echoGoodsList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    echoGoodsList()
}

import { getCategoryListService } from '@/api/category.js'
import { getVendorListService } from '@/api/vendor.js'
//回显分类列表
const echoCategoryList = async () => {
    let res = await getCategoryListService()
    categorys.value = res.data
}
echoCategoryList()
//回显供应商列表
const echoVendorList = async () => {
    let res = await getVendorListService()
    vendors.value = res.data
}
echoVendorList()
// 查询商品列表
import { getGoodsStockService } from '@/api/goods.js'
const echoGoodsList = async () => {
    let res = await getGoodsStockService({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        categoryId: categoryId.value ? categoryId.value : null,
        vendorId: vendorId.value ? vendorId.value : null,
        goodsName: form.value.inputName ? form.value.inputName : null
    })
    console.log(res)
    //渲染商品列表
    goods.value = res.data.items
    //渲染分页条
    total.value = res.data.total
    //添加商品分类名称，for循环遍历goods，根据id查找categorys中对应的分类名称
    for (let i = 0; i < goods.value.length; i++) {
        let good = goods.value[i];
        for (let j = 0; j < categorys.value.length; j++) {
            if (good.categoryId == categorys.value[j].id) {
                good.categoryName = categorys.value[j].categoryName
            }
        }
    }
    //添加供应商名称，for循环遍历goods，根据id查找vendors中对应的供应商名称
    for (let i = 0; i < goods.value.length; i++) {
        let good = goods.value[i];
        for (let j = 0; j < vendors.value.length; j++) {
            if (good.vendorId == vendors.value[j].id) {
                good.vendorName = vendors.value[j].vendorName
            }
        }
    }

}
echoGoodsList()


</script>
<template>
    <div class="page-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span class="title">库存预警管理</span>
                </div>
            </template>
            
            <!-- 搜索区域 -->
            <div class="search-area">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="商品分类">
                        <el-select placeholder="请选择" v-model="categoryId" class="custom-input">
                            <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商分类">
                        <el-select placeholder="请选择" v-model="vendorId" class="custom-input">
                            <el-option v-for="c in vendors" :key="c.id" :label="c.vendorName" :value="c.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input v-model="form.inputName" placeholder="请输入" class="custom-input"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="echoGoodsList" class="search-button">
                            <el-icon><Search /></el-icon>搜索
                        </el-button>
                        <el-button @click="categoryId = '', vendorId = '', form.inputName = ''" class="reset-button">
                            <el-icon><Refresh /></el-icon>重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 商品列表 -->
            <el-table 
                :data="goods" 
                style="width: 100%"
                border
                stripe
                :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
                :row-style="{ height: '60px' }"
                :cell-style="{ padding: '8px 0' }">
                <el-table-column label="序号" width="80" type="index" align="center" />
                <el-table-column label="商品名称" prop="goodsName" min-width="150" align="center"></el-table-column>
                <el-table-column label="库存量" prop="inventory" width="120" align="center">
                    <template #default="{ row }">
                        <el-tag type="danger" effect="dark">{{ row.inventory }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="备注信息" prop="remark" min-width="200" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="提示信息" min-width="150" align="center">
                    <template #default>
                        <el-tag type="danger" effect="dark">库存不足</el-tag>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无预警数据" />
                </template>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination 
                    v-model:current-page="pageNum" 
                    v-model:page-size="pageSize" 
                    :page-sizes="[10, 20, 50, 100]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper" 
                    background 
                    @size-change="onSizeChange"
                    @current-change="onCurrentChange" />
            </div>
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
.page-container {
    padding: 20px;
    
    .box-card {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s;

        &:hover {
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
        }
    }
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .title {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
        }
    }
    
    .search-area {
        margin-bottom: 20px;
        padding: 10px;
        background-color: #f5f7fa;
        border-radius: 4px;
    }
}

.custom-input {
    width: 100%;
}

.search-button, .reset-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

:deep(.el-descriptions) {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

:deep(.el-table) {
    margin-top: 10px;
}

:deep(.el-input-number) {
    width: 100%;
}

:deep(.el-tag) {
    padding: 0 12px;
    height: 28px;
    line-height: 26px;
}

.operation-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}
</style>